<template>
	<view class="fboxCol h100" :data-theme="theme" :class="theme" :style="globalColor.style">
		<not-login ref="notLoginRef" position="center" />
		<!-- <view class="mine_xx" ref="mineXxRef" id="mineXxRef" :style="{ 'background-image': 'url(' + detail.backImg + ')' }"> -->
		<view class="mine_xx" ref="mineXxRef" id="mineXxRef" :style="detail.backImg ? `background-image: url(${detail.backImg})`: ``">
			<!-- #ifdef MP-WEIXIN -->
			<HeadCustom ref="HeadCustom" type="index" :isBg="false"></HeadCustom>
			<!-- #endif -->
			<view class="fboxRow info">
				<view class="ming_tx-inner fboxRow Ycenter Xcenter" v-if="isLogin" @click="goPage('card')"><image :src="detail.avatar" class="ming_tx" mode="aspectFill"></image></view>
				<view class="ming_tx-inner fboxRow Ycenter Xcenter" v-else>
					<image class="ming_tx" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/nologin.png" mode="aspectFill"></image>
				</view>
				<view class="fboxRow Ycenter flex1" v-if="isLogin" @click="goPage('cardMsg')">
					<view class="grxx flex1">
						<view class="name_box fboxRow Ycenter">
							<text class="name_text fwb font38 mr12">{{ detail.realName }}</text>
							<view class="font22 auth fboxRow Ycenter Xcenter">{{ detail.isAuth ? '已认证' : '未认证' }}</view>
						</view>
						<view class="mt14 fboxRow Ycenter font28 lh40 mt14">{{ detail.gender == '1' ? '男' : '女' }}
						 <view v-if="detail.gender && detail.areaCityName" style="margin: 0 10rpx; width: 1rpx;height: 20rpx;background-color: rgba(247, 249, 255, 0.3);"></view>
						{{ detail.areaCityName }}</view>
						<view class="mt12 font28 lh40 font-ell1">{{ detail.memberSign || '' }}</view>
					</view>
					<text class="bwfont bw-arrow-right font28"></text>
				</view>
				<view class="grxx" v-else>
					<view @click="login" class="goLogin fboxRow Ycenter Xcenter bg-linear">去登录</view>
					<view class="p1 pclass mt20"></view>
					<view class="p2 pclass mt20"></view>
				</view>
			</view>

			<view class="mine_jl fboxRow Xbetween">
				<view class="flex1 fboxCol Ycenter'" v-for="(item, index) in jbObj" :key="index" @tap="goMyfunc(item)">
				<!-- <view :class="[index == 1 ? 'flex1 fboxCol Ycenter' : '']" v-for="(item, index) in jbObj" :key="index" @tap="goMyfunc(item)"> -->
					<view class="gzxx fboxCol Ycenter">
						<view class="gzxx-sum font38">{{ detail[item.id] || 0 }}</view>
						<view class="mt20 font28 lh38 gzxx-name">{{ item.type }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card" v-for="(item, index) in mineCz" :key="index">
			<view class="card-hd font32">{{ item.title }}</view>
			<view class="card-bd fboxWrap border-radius12" :class="item.key">
				<view class="item-btn fboxCol Ycenter Xcenter" v-for="(_item, _index) in personalCenterVO[item.key]" :key="_index" @click="goMyfunc(_item)">
					<!-- <view class="icon_min" :style="{ backgroundColor: item.color }"><text class="bwfont" :class="item.icon"></text></view> -->
					<image class="icon_img" :src="_item.moduleIcon"></image>
					<view class="tit font28 mt16">{{ _item.moduleName }}</view>
				</view>
			</view>
		</view>
		<view v-if="isLogin" class="exitLogin font32 fboxRow Ycenter Xcenter border-radius12" @click="exitLogin">退出登录</view>

		<view class="mine_cz">
			<view class="login_app fboxRow border-radius12">
				<image class="loginLogo" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/logo_new.png" mode=""></image>
				<view class="flex1 fboxCol">
					<view class="benwu-title">本无名片</view>
					<view class="benwu-msg">可体验更多功能</view>
				</view>
				<view class="appBtn bg-linear" @click="goApp">前往APP</view>
				<!-- <u-button class="appBtn" @click="goApp" shape="circle" text="前往APP"></u-button> -->
			</view>
		</view>
		<view class="copyright fboxRow Ycenter Xcenter font24">(渝)人服证字[2023]号 第 4000001313号</view>
		<ModelPublic :isShowClose="false" ref="modelRef" @confirm="confirmButton" :closeOnClickOverlay="false">
			<template #msg>
				<view class="sftc">是否退出登录？</view>
			</template>
		</ModelPublic>
		<BottomTabbar active="mine" />
	</view>
</template>

<script>
import { getUserHome, userLayout, confMyCenter } from '@/api/mine.js';
import { judgeIsLogin } from '@/static/js/common.js';
import ModelPublic from '@/components/model-public/index.vue';
import BottomTabbar from '@/components/bottom-btn/bottom-tabbar.vue';
export default {
	components: { ModelPublic, BottomTabbar },
	props: {},
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			isLogin: true,
			isShowLogin: false,
			exitshow: false,
			detail: {},
			jbObj: [
				{
					sum: 0,
					type: '关注',
					url: '/mine/follow',
					id: 'attentionTotal'
				},
				{
					sum: 0,
					type: '粉丝',
					url: '/mine/vermicelli',
					id: 'fansTotal'
				},
				{
					sum: 0,
					type: '访问',
					url: '/mine/interview',
					id: 'callerCount'
				}
			],
			backImg: '',
			mineCz: [
				{
					title: '常用功能',
					key: 'commonModule',
					list: [
						{
							icon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/icon-mine-9.png',
							mc: '我的主页',
							url: '/mydd',
							isLogin: true
						},
						{
							icon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/icon-mine-5.png',
							mc: '我的圈子',
							isLogin: true,
							url: '/myCircle'
						},
						{
							icon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/icon-mine-7.png',
							mc: '我的企业',
							url: '/about/guidePage',
							isLogin: true
						},
						{
							icon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/icon-mine-1.png',
							mc: '我的文章',
							url: '/hotArticle/hotMine',
							isLogin: true
						},
						{
							icon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/icon-mine-6.png',
							mc: '我的推广',
							isLogin: true,
							url: '/promotion'
						},
						{
							icon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/icon-mine-3.png',
							mc: '求职服务',
							url: '/recruit/user/home',
							isLogin: true
						},
						{
							icon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/icon-mine-8.png',
							mc: '积分任务',
							url: '/mine/points/index',
							isLogin: true
						}
					]
				},
				{
					title: '其他功能',
					key: 'otherModule',
					list: [
						{
							icon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/icon-mine-10.png',
							mc: '帮助中心',
							url: '/helpCenter',
							isLogin: false
						},
						{
							icon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/icon-mine-14.png',
							mc: '关于我们',
							url: '/about',
							isLogin: false
						}
					]
				}
			],
			personalCenterVO:{},
			fixedHeight: ''
		};
	},
	onLoad() {
		// #ifdef MP
		uni.getSystemInfo({
			success: res => {
				// 获取手机顶部状态栏的高度
				const statusBarHeight = res.statusBarHeight || 0;

				// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;

				// 计算顶部图标距离
				const topIconDistance = statusBarHeight + navBarHeight;
				const top = menuButtonInfo.top;
				// 打印顶部图标距离
				// this.leftTopNum = top + 'px';
				this.fixedHeight = topIconDistance * 2 + 'rpx';
			},
			fail: err => {
				console.error('获取系统信息失败:', err);
			}
		});
		// #endif
	},
	onShow() {
		this.getInit();
		uni.setNavigationBarTitle({
			title: `个人中心`
		});
	},
	methods: {
		// 初始化
		getInit() {
			if (judgeIsLogin()) {
				this.getUserData();
			} else {
				this.isLogin = false;
			}
			this.getConfMyCenter()
		},
		// 获取常用功能，其他功能模块内容
		getConfMyCenter(){
			let reqData = { requestSource: 1, showType: 1 }
			// #ifdef MP
				reqData = { requestSource: 1, showType: 2 }
			// #endif
			confMyCenter(reqData).then(res=>{
				this.personalCenterVO = res.data.personalCenterVO
			})
		},
		// 获取首页信息
		getUserData() {
			this.isLogin = true;
			this.isShowLogin = false;
			getUserHome({}).then(res => {
				console.log('getUserHome', res)
				this.detail = res.data;
				// 暗黑模式下的背景图片
				// if (!this.detail.backImg) {
				// 	this.detail.backImg = 'https://ebc-prod.cdn.benwunet.com/back/otherBack.png';
				// }
				// let mineXxRef = document.getElementById('mineXxRef');
				// mineXxRef.style.backgroundImage = 'url("' + this.detail.backImg + '")';
			});
		},
		goPage(type) {
			if(type =='card'){
				this.$pageTo('/CardDetail?id='+this.detail.memberId);
			}else if(type == 'cardMsg'){
				this.$pageTo('/cardMsg');
			}
		},
		// 功能页面跳转
		goMyfunc(obj) {
			const { bw_params } = getApp().getBWData(['bw_params']);
			if (bw_params && bw_params.access_token) {
				// #ifdef MP
				if (obj.appJumpPath == '/myCircle' || obj.appJumpPath == '/mydd' || obj.appJumpType == 2) {
					this.$pageTo(obj.appJumpPath);
				} else {
					this.$pageTo('/about/guidePage');
				}
				// #endif
				// #ifdef H5
				const url = obj.appJumpPath || obj.url
				this.$pageTo(url);
				// #endif
			} else {
				if (obj.appJumpPath == '/helpCenter' || obj.appJumpPath == '/about') {
					this.$pageTo(obj.appJumpPath);
				} else {
					this.$refs.notLoginRef.openLogin({
						show: true,
						position: 'center'
					});
				}
			}

			// if (obj.appJumpPath == '/about') {
			// 	this[obj.func](obj.appJumpPath || '');
			// } else if (obj.func && this.isLogin) {
			// 	this[obj.func](obj.appJumpPath || '');
			// } else {
			// 	this.isShowLogin = true;
			// 	this.$refs.notLoginRef.inShow = true;
			// }
		},
		// 退出登录
		exitLogin() {
			this.$refs.modelRef.show = true;
		},
		// 登录
		login() {
			this.$pageTo('/mine/mobile');
		},
		//确认退出登录
		confirmButton() {
			userLayout({}).then(res1 => {
				uni.removeStorage({
					key: 'bw_params',
					success: res => {}
				});
				uni.removeStorage({
					key: 'bw_user_temp',
					success: res => {
						uni.reLaunch({
							url: '/mine'
						});
					}
				});
				uni.removeStorageSync('bw_params');
				uni.removeStorageSync('bw_user_temp');
				uni.removeStorageSync('bw_card_temp');
				this.isLogin = false;
				this.exitshow = false;
			});
		},
		// 前往app
		goApp() {
			uni.navigateTo({
				url: '/about/guidePage'
			});
		},
		// 跳转到我的圈子
		goOtherPage(url) {
			uni.navigateTo({
				url: url
			});
		},
		//取消
		cancelButton() {
			this.exitshow = false;
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-button__text {
	color: #111216;
	font-weight: 500;
	font-size: 30rpx;
}
[data-theme='lightBlue-theme'] {
	.bg-head {
		padding: 112rpx 24rpx 0;
		background: linear-gradient(180deg, var(--navViewStartColor) 0%, var(--navViewCenterColor) 32%, rgba(255, 255, 255, 0) 100%);
	}
}
.nobottom {
	border-bottom: none !important;
}
.goLogin {
	padding: 10rpx 20rpx;
	margin-bottom: 30rpx;
	height: 50rpx;
	width: 150rpx;
	border-radius: 25rpx;
	// box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.16);
}
.sftc {
	color: var(--contentFontDarkColor);
}
.h100 {
	min-height: 100vh;
	.mine_xx {
		padding-bottom: 40rpx;
		/* #ifdef H5 */
		padding-top: 80rpx;
		/* #endif */
		/* #ifdef MP-TOUTIAO */
		padding-top: 30rpx;
		/* #endif */
		color: #f7f9ff;
		background: linear-gradient(180deg, #B98257 0%, #966844 100%) no-repeat top center/cover;
		// background: url('https://ebc-prod.cdn.benwunet.com/poster/normal.jpg)') no-repeat top center/cover;
		// background: linear-gradient(180deg, var(--navViewStartColor) 0%, var(--navViewCenterColor) 32%, rgba(255, 255, 255, 0) 100%);
		.info {
			padding: 0 40rpx;
		}
		.auth {
			padding: 0 16rpx;
			height: 36rpx;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 16rpx;
			color: #fff;
		}
		.name_box {
			height: 50rpx;
			.name_text {
				// color: var(--titleFontColor);
			}
		}
		.ming_tx-inner{ margin-right: 26rpx; width: 152rpx;height: 152rpx;overflow: hidden;border-radius: 50%;background: linear-gradient(180deg, #FFD9B5 3%, #FFF2E5 100%);}
		.ming_tx {
			width: 148rpx;
			height: 148rpx;
			border-radius: 50%;
			object-fit: cover;
		}
		.grxx {
			// color: var(--contentFontDarkColor);
			.mt12{margin-top: 12rpx;}
			.mt14{margin-top: 14rpx;}
			.pclass {
				background-color: #acb4c7;
				height: 25rpx;
				border-radius: 6rpx;
				opacity: 0.5;
				margin-top: 10rpx;
			}
			.p1 {
				width: 260rpx;
			}
			.p2 {
				width: 130rpx;
			}
		}
		.mine_jl {
			margin-top: 58rpx;
			// padding: 0 40rpx;
			position: relative;
			.gzxx-name {
				// color: var(--contentFontLightColor);
			}
			.gzxx-sum {
				// color: var(--titleFontColor);
			}
		}
		.mine_jl::before {
			content: '';
			position: absolute;
			left: 33%;
			top: 50%;
			margin-top: -24rpx;
			width: 1rpx;
			height: 48rpx;
			background: rgba(247, 249, 255, 0.3);
		}
		.mine_jl::after {
			content: '';
			position: absolute;
			right: 33%;
			top: 50%;
			margin-top: -24rpx;
			width: 1rpx;
			height: 48rpx;
			background: rgba(247, 249, 255, 0.3);
		}
	}
	.mine_cz {
		padding: 0 24rpx;
		.login_app {
			height: 140rpx;
			background-color: var(--viewBgColor);
			margin-bottom: 26rpx;
			align-items: center;
			padding: 0 40rpx;
			position: relative;
			.loginLogo {
				height: 88rpx;
				width: 88rpx;
				border-radius: 8rpx;
				margin-right: 15rpx;
			}
			.benwu-title {
				font-size: 36rpx;
				margin-bottom: 20rpx;
				color: var(--contentFontDarkColor);
			}
			.benwu-msg {
				font-size: 24rpx;
				color: var(--contentFontFourColor);
			}
			.appBtn {
				padding: 15rpx 20rpx;
				// border: 1px solid #e8cda7;
				border-radius: 12rpx;
				// background-color: #1c1c1c;
				// color: #e8cda7;
				font-weight: 500;
				font-size: 30rpx;
			}
		}
	}
}
.card {
	padding: 26rpx 24rpx 0;
}
.card-hd {
	line-height: 44rpx;
	font-weight: 600;
}
.item-btn {
	width: 25%;
	padding: 20rpx 0;
}
.item-btn .icon_img {
	width: 80rpx;
	height: 80rpx;
}
.item-btn .tit {
	line-height: 40rpx;
	color: var(--contentFontDarkColor);
}
.card-bd {
	padding: 12rpx 0 6rpx;
	margin-top: 18rpx;
	background-color: var(--viewBgColor);
}
.card-bd.other .icon_img {
	width: 80rpx;
	height: 80rpx;
}
.exitLogin {
	margin: 80rpx 24rpx 0;
	height: 76rpx;
	border-radius: 12rpx;
	background: linear-gradient(360deg, var(--rampButtonBackEndColor) 0%, var(--rampButtonBackStartColor) 100%);
	color: var(--buttonTextColor);
}

.login_app {
	margin-top: 80rpx;
}

.copyright {
	color: #747986;
	padding: 0 0 50rpx;
}
</style>
